<script lang="ts" setup>
/**
 * @ClassName AdminLayoutContent
 * @Description 管理控制台内容布局
 * @Author xuyizhuo
 * @Date 2024/12/23 23:21
 * @example
 */
</script>

<template>
    <div class="admin-layout-content">
        <!--导航面板屑-->
        <div>导航面板屑</div>
        <!--内容区域-->
        <div class="admin-layout-wrapper">
            <div class="admin-layout-content-left">tree</div>
            <div class="admin-layout-content-main">
                <div>search</div>
                <div>
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.admin-layout-content {
    display: flex;
    flex-direction: column;
    padding: var(--app-admin-content-padding);
    height: 100%;

    // 内容区域
    .admin-layout-wrapper {
        display: flex;
        flex: 1;
        gap: 16px;
        width: 100%;

        // 左侧树
        .admin-layout-content-left {
            border-radius: var(--app-border-radius);
            background-color: var(--app-admin-content-bg-color);
            width: var(--app-admin-content-width);
        }

        // 右侧主体内容
        .admin-layout-content-main {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 8px;
            border-radius: var(--app-border-radius);
            width: 0;

            & > div {
                border-radius: var(--app-border-radius);
                background-color: var(--app-admin-content-bg-color);
            }

            // 展示内容区域
            & > div:last-child {
                flex: 1;
                border-radius: var(--app-border-radius);
            }
        }
    }
}
</style>
